<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的爱好</title>
	<style>
			.con {
    position: relative;
}
.nav > li {
    display: inline;
    float:left;
}
.nav li a {
    color: #FFFF0F;
    display: block;
    line-height: 20px;
    padding: 15px 30px 15px 148px;
}
.con:hover {
    cursor: pointer;
}
.con:hover .con-box{
     transform: translateZ(-25px) rotateX(90deg);
}
.con-box {
     transition: all .3s ease-out;
    transform: translatez(-25px);
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.cont {
    transform: rotatex(0deg) translatez(25px);
}
.back {
    transform: rotatex(-90deg) translatez(25px);
    color: #BD06DE;
}
.cont, .back {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:#091658;  
    padding: 15px 30px 15px 31px;
    color: white;
    box-sizing: border-box;
}
.nav li a:hover .cont,  
.nav li a:hover .back {
    background-color:#4A6DC0;
}
		
		body{
			background-image: url("image/小熊.jpg");
			background-size: 100%;
		}
		

		
 		#zhou  a:link,  #zhou a:visited{
			font-family:宋体;
			font-size:20pt;
			color:#F4B805;
			text-decoration:none;
		}
		
 		#zhou a:hover{
			color:#0000FF;
			text-decoration:underline;
		}
		
		#zhou a:active{
			color:#FF0206;
		}

		#xue a:link,  #xue a:visited{
			font-family:宋体;
			font-size:20pt;
			color:#F4B805;
			text-decoration:none;
		}
		
 		#xue a:hover{
			color:#0000FF;
			text-decoration:underline;
		}
		
		#xue a:active{
			color:#FF0206;
		}
		
		#mao a:link,  #mao a:visited{
			font-family:宋体;
			font-size:20pt;
			color:#F4B805;
			text-decoration:none;
		}
		
 		#mao a:hover{
			color:#0000FF;
			text-decoration:underline;
		}
		
		#mao a:active{
			color:#FF0206;
		}
	</style>
	
</head>

<body>
<span style="text-align: center">	
	<div>
		<ul class="nav">
    		<li><a href="index.html" class="con"> 0000 <span class="con-box"><span class="cont">个人首页</span><span class="back"><span style="font-size: 21px">Let's go back!</span></span>
    </span> </a></li>
    <li><a href="个人简介.html" class="con"> 1111 <span class="con-box"><span class="cont">个人简介</span><span class="back"><span style="font-size: 21px">个人简介</span></span></span> </a></li>
    <li><a href="我的家乡.html" class="con"> 1111 <span class="con-box"><span class="cont">我的家乡</span><span class="back"><span style="font-size: 21px">新疆</span></span></span> </a></li>
    <li><a href="我的爱好.html" class="con"> 1111 <span class="con-box"><span class="cont">我的爱好</span><span class="back"><span style="font-size: 21px">跳舞</span></span></span> </a></li>
    <li><a href="我的榜样.html" class="con"> 1111 <span class="con-box"><span class="cont">我的榜样</span><span class="back"><span style="font-size: 21px">袁隆平</span></span></span> </a></li>
  </ul>
</div>
</span>	
	
<span style="top:70px;position: absolute;left:50px">
	<span style="color: rgb(254, 254, 254); font-size: 26px;font-family: 楷体;"><div id="zhou"><a style="font-family:verdana;color:rgb(252, 184, 102);font-size:60px;" href="爵士.html">爵士</a></div></span>
	<img src="image/爵士.jfif" alt="" width="300px">

<span style="top:50px;position: absolute;left:315px">
	<span style="color: rgb(254, 254, 254); font-size: 26px;font-family: 楷体;"><div id="zhou"><a style="font-family:verdana;color:rgb(252, 184, 102);font-size:60px;" href="Kpop.html">kpop</a></div></span>
	<img src="image/bp.jpg" alt="" width="400px">
<span style="top:50px;position: absolute;left:430px">
	<span style="color: rgb(254, 254, 254); font-size: 26px;font-family: 楷体;"><div id="zhou"><a style="font-family:verdana;color:rgb(252, 184, 102);font-size:60px;" href="popping.html">popping</a></div></span>
	<img src="image/popping.jpg" alt="" width="400px">
</span>

		
		
	
</body>
</html>
